<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多场景底部组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 80px;
      transition: background-color 0.3s;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      min-height: 100vh;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 内容区域 */
    .content-section {
      padding: 20px 0;
    }
    
    .content-placeholder {
      height: 120px;
      border-radius: 12px;
      margin-bottom: 15px;
    }
    
    .content-text {
      line-height: 1.8;
      margin-bottom: 15px;
    }
    
    /* 切换控制器 */
    .switchers {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 12px;
      border: 1px solid rgba(0,0,0,0.1);
    }
    
    .switch-group {
      margin-bottom: 10px;
    }
    
    .switch-group:last-child {
      margin-bottom: 0;
    }
    
    .switch-label {
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
    }
    
    .btn-group {
      display: flex;
      gap: 8px;
    }
    
    .scene-btn, .style-btn {
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      border: none;
      cursor: pointer;
      flex: 1;
      transition: all 0.2s;
    }
    
    .scene-btn.active, .style-btn.active {
      font-weight: 600;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* 底部组件样式 */
    .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      z-index: 99;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    
    .action-group {
      display: flex;
      gap: 15px;
    }
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 11px;
      cursor: pointer;
      gap: 3px;
    }
    
    .action-btn i {
      font-size: 20px;
    }
    
    .primary-actions {
      margin-left: auto;
      display: flex;
      gap: 10px;
    }
    
    .primary-btn {
      padding: 10px 20px;
      border-radius: 25px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      font-size: 15px;
      white-space: nowrap;
    }
    
    .primary-btn.main {
      padding: 10px 25px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 15px;
      z-index: 10000;
      display: none;
    }
    
    /* 场景1 - 内容浏览 */
    .scene-1 .bottom-bar {
      justify-content: space-between;
    }
    
    .scene-1 .action-group {
      gap: 20px;
    }
    
    /* 场景2 - 活动参与 */
    .scene-2 .action-group {
      gap: 15px;
    }
    
    /* 场景3 - 聊天界面 */
    .scene-3 .bottom-bar {
      height: auto;
      padding: 10px 15px;
    }
    
    .chat-input-group {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 10px;
    }
    
    .chat-input {
      flex: 1;
      border-radius: 20px;
      padding: 10px 15px;
      border: 1px solid;
      outline: none;
      font-size: 15px;
    }
    
    .chat-actions {
      display: flex;
      gap: 10px;
    }
    
    .chat-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
    }
    
    /* 场景4 - 商品详情 */
    .scene-4 .bottom-bar {
      height: auto;
      padding: 10px 15px;
      flex-wrap: wrap;
    }
    
    .scene-4 .action-group {
      width: 100%;
      margin-bottom: 10px;
      justify-content: space-around;
    }
    
    .scene-4 .primary-actions {
      width: 100%;
      margin-left: 0;
    }
    
    .scene-4 .primary-btn {
      flex: 1;
    }
    
    /* 场景5 - 导航菜单 */
    .scene-5 .bottom-bar {
      justify-content: space-around;
      height: 60px;
    }
    
    .scene-5 .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 10px;
      color: inherit;
      cursor: pointer;
      gap: 3px;
      flex: 1;
    }
    
    .scene-5 .nav-item i {
      font-size: 20px;
    }
    
    .scene-5 .nav-item.active {
      font-weight: 600;
    }
    
    /* 风格1 - 经典蓝 */
    .style-1 {
      background-color: #ffffff;
      color: #212529;
    }
    
    .style-1 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .style-1 .nav-btn {
      color: #6c757d;
    }
    
    .style-1 .nav-btn:hover {
      background-color: #f1f5f9;
    }
    
    .style-1 .content-placeholder {
      background-color: #e9ecef;
    }
    
    .style-1 .bottom-bar {
      background-color: white;
    }
    
    .style-1 .action-btn {
      color: #6c757d;
    }
    
    .style-1 .action-btn.active {
      color: #0d6efd;
    }
    
    .style-1 .primary-btn {
      background-color: #e7f1ff;
      color: #0d6efd;
    }
    
    .style-1 .primary-btn.main {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .scene-btn.active, .style-1 .style-btn.active {
      background-color: #e7f1ff;
      color: #0d6efd;
    }
    
    .style-1 .chat-input {
      border-color: #ced4da;
      background-color: #f8fafc;
    }
    
    .style-1 .chat-btn {
      background-color: #e7f1ff;
      color: #0d6efd;
    }
    
    .style-1 .nav-item.active {
      color: #0d6efd;
    }
    
    /* 风格2 - 活力橙 */
    .style-2 {
      background-color: #ffffff;
      color: #854d0e;
    }
    
    .style-2 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(249, 115, 22, 0.1);
    }
    
    .style-2 .nav-btn {
      color: #c2410c;
    }
    
    .style-2 .nav-btn:hover {
      background-color: #fff3cd;
    }
    
    .style-2 .content-placeholder {
      background-color: #fff3cd;
    }
    
    .style-2 .bottom-bar {
      background-color: white;
    }
    
    .style-2 .action-btn {
      color: #c2410c;
    }
    
    .style-2 .action-btn.active {
      color: #ea580c;
    }
    
    .style-2 .primary-btn {
      background-color: #fff3cd;
      color: #ea580c;
    }
    
    .style-2 .primary-btn.main {
      background-color: #ea580c;
      color: white;
    }
    
    .style-2 .scene-btn.active, .style-2 .style-btn.active {
      background-color: #fff3cd;
      color: #ea580c;
    }
    
    .style-2 .chat-input {
      border-color: #fdba74;
      background-color: #fff9f0;
    }
    
    .style-2 .chat-btn {
      background-color: #fff3cd;
      color: #ea580c;
    }
    
    .style-2 .nav-item.active {
      color: #ea580c;
    }
    
    /* 风格3 - 暗黑系 */
    .style-3 {
      background-color: #1e293b;
      color: #f8fafc;
    }
    
    .style-3 .navbar {
      background-color: #0f172a;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .style-3 .nav-btn {
      color: #94a3b8;
    }
    
    .style-3 .nav-btn:hover {
      background-color: #334155;
    }
    
    .style-3 .content-placeholder {
      background-color: #334155;
    }
    
    .style-3 .bottom-bar {
      background-color: #0f172a;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    }
    
    .style-3 .action-btn {
      color: #94a3b8;
    }
    
    .style-3 .action-btn.active {
      color: #93c5fd;
    }
    
    .style-3 .primary-btn {
      background-color: #334155;
      color: #93c5fd;
    }
    
    .style-3 .primary-btn.main {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-3 .scene-btn.active, .style-3 .style-btn.active {
      background-color: #334155;
      color: #93c5fd;
    }
    
    .style-3 .chat-input {
      border-color: #475569;
      background-color: #334155;
      color: #f8fafc;
    }
    
    .style-3 .chat-btn {
      background-color: #334155;
      color: #93c5fd;
    }
    
    .style-3 .nav-item.active {
      color: #93c5fd;
    }
    
    /* 风格4 - 清新绿 */
    .style-4 {
      background-color: #ffffff;
      color: #166534;
    }
    
    .style-4 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(16, 185, 129, 0.1);
    }
    
    .style-4 .nav-btn {
      color: #166534;
    }
    
    .style-4 .nav-btn:hover {
      background-color: #dcfce7;
    }
    
    .style-4 .content-placeholder {
      background-color: #dcfce7;
    }
    
    .style-4 .bottom-bar {
      background-color: white;
    }
    
    .style-4 .action-btn {
      color: #166534;
    }
    
    .style-4 .action-btn.active {
      color: #15803d;
    }
    
    .style-4 .primary-btn {
      background-color: #dcfce7;
      color: #15803d;
    }
    
    .style-4 .primary-btn.main {
      background-color: #15803d;
      color: white;
    }
    
    .style-4 .scene-btn.active, .style-4 .style-btn.active {
      background-color: #dcfce7;
      color: #15803d;
    }
    
    .style-4 .chat-input {
      border-color: #a7f3d0;
      background-color: #f0fdf4;
    }
    
    .style-4 .chat-btn {
      background-color: #dcfce7;
      color: #15803d;
    }
    
    .style-4 .nav-item.active {
      color: #15803d;
    }
  </style>
</head>
<body>
  <!-- 切换控制器 -->
  <div class="switchers">
    <div class="switch-group">
      <span class="switch-label">场景</span>
      <div class="btn-group scene-switch">
        <button class="scene-btn active" data-scene="1">内容浏览</button>
        <button class="scene-btn" data-scene="2">活动参与</button>
      </div>
    </div>
    <div class="switch-group">
      <div class="btn-group scene-switch">
        <button class="scene-btn" data-scene="3">聊天界面</button>
        <button class="scene-btn" data-scene="4">商品详情</button>
      </div>
    </div>
    <div class="switch-group">
      <div class="btn-group scene-switch">
        <button class="scene-btn" data-scene="5">导航菜单</button>
      </div>
    </div>
    <div class="switch-group">
      <span class="switch-label">风格</span>
      <div class="btn-group style-switch">
        <button class="style-btn active" data-style="1">经典蓝</button>
        <button class="style-btn" data-style="2">活力橙</button>
        <button class="style-btn" data-style="3">暗黑系</button>
        <button class="style-btn" data-style="4">清新绿</button>
      </div>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast" id="toast">操作成功</div>
  
  <!-- 场景1 - 内容浏览 -->
  <div class="page-container scene-1 style-1 active" data-scene="1" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">精选内容</h1>
        <button class="nav-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="container content-section">
      <div class="content-placeholder"></div>
      <p class="content-text">这是一篇精选文章内容预览，展示了社交平台上的热门话题和讨论。用户可以对内容进行点赞、评论和分享等操作。</p>
      <p class="content-text">滑动页面可以查看更多内容，底部操作栏始终可见，方便随时进行互动。</p>
      <div class="content-placeholder"></div>
      <p class="content-text">评论区有很多精彩讨论，点击底部评论按钮可以查看完整评论列表并参与讨论。</p>
    </div>
    
    <!-- 底部组件 -->
    <div class="bottom-bar">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn share-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="action-group">
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
          <span>更多</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 场景2 - 活动参与 -->
  <div class="page-container scene-2 style-1" data-scene="2" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">活动详情</h1>
        <button class="nav-btn share-btn-top">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
    </div>
    
    <div class="container content-section">
      <div class="content-placeholder"></div>
      <h3 class="nav-title">2023年度科技峰会</h3>
      <p class="content-text">时间：2023-12-15 09:00<br>地点：国际会展中心<br>票价：¥1999/人</p>
      <p class="content-text">本次峰会汇聚行业专家，探讨科技发展趋势和未来机遇，适合创业者、投资者和科技爱好者参与。</p>
      <div class="content-placeholder"></div>
      <p class="content-text">已有500+人报名参加，点击底部"立即报名"按钮锁定席位。</p>
    </div>
    
    <!-- 底部组件 -->
    <div class="bottom-bar">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>感兴趣</span>
        </button>
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn share-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="primary-actions">
        <button class="primary-btn invite-btn">
          <i class="fa fa-user-plus"></i> 邀请
        </button>
        <button class="primary-btn main register-btn">
          立即报名
        </button>
      </div>
    </div>
  </div>
  
  <!-- 场景3 - 聊天界面 -->
  <div class="page-container scene-3 style-1" data-scene="3" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">产品交流群</h1>
        <button class="nav-btn info-btn">
          <i class="fa fa-info-circle"></i>
        </button>
      </div>
    </div>
    
    <div class="container content-section">
      <div class="content-placeholder" style="width: 70%;"></div>
      <div class="content-placeholder" style="width: 80%; margin-left: auto;"></div>
      <div class="content-placeholder" style="width: 60%;"></div>
      <div class="content-placeholder" style="width: 90%; margin-left: auto;"></div>
      <div class="content-placeholder" style="width: 50%;"></div>
    </div>
    
    <!-- 底部组件 -->
    <div class="bottom-bar">
      <div class="chat-input-group">
        <div class="chat-actions">
          <button class="chat-btn emotion-btn">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="chat-btn image-btn">
            <i class="fa fa-image"></i>
          </button>
        </div>
        <input type="text" class="chat-input" placeholder="输入消息...">
        <button class="chat-btn send-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 场景4 - 商品详情 -->
  <div class="page-container scene-4 style-1" data-scene="4" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">商品详情</h1>
        <button class="nav-btn share-btn-top">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
    </div>
    
    <div class="container content-section">
      <div class="content-placeholder"></div>
      <h3 class="nav-title">无线蓝牙耳机</h3>
      <p class="content-text" style="font-size: 18px; color: #dc3545;">¥299.00</p>
      <p class="content-text">高清音质 | 降噪功能 | 24小时续航 | 防水设计</p>
      <div class="content-placeholder"></div>
      <p class="content-text">用户评分：★★★★☆ (128条评价)</p>
      <p class="content-text">库存：235件</p>
    </div>
    
    <!-- 底部组件 -->
    <div class="bottom-bar">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>喜欢</span>
        </button>
        <button class="action-btn compare-btn">
          <i class="fa fa-exchange"></i>
          <span>对比</span>
        </button>
        <button class="action-btn collect-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn service-btn">
          <i class="fa fa-headphones"></i>
          <span>客服</span>
        </button>
      </div>
      
      <div class="primary-actions">
        <button class="primary-btn cart-btn">
          <i class="fa fa-shopping-cart"></i> 加入购物车
        </button>
        <button class="primary-btn main buy-btn">
          立即购买
        </button>
      </div>
    </div>
  </div>
  
  <!-- 场景5 - 导航菜单 -->
  <div class="page-container scene-5 style-1" data-scene="5" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <h1 class="nav-title">首页</h1>
        <button class="nav-btn search-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
    
    <div class="container content-section">
      <div class="content-placeholder"></div>
      <div class="content-placeholder"></div>
      <div class="content-placeholder"></div>
      <p class="content-text">这是社交应用的首页内容区域，底部是主导航菜单，方便用户快速切换不同功能模块。</p>
    </div>
    
    <!-- 底部组件 -->
    <div class="bottom-bar">
      <button class="nav-item active" data-nav="home">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </button>
      <button class="nav-item" data-nav="discover">
        <i class="fa fa-compass"></i>
        <span>发现</span>
      </button>
      <button class="nav-item" data-nav="add">
        <i class="fa fa-plus-circle"></i>
        <span>发布</span>
      </button>
      <button class="nav-item" data-nav="notifications">
        <i class="fa fa-bell-o"></i>
        <span>通知</span>
      </button>
      <button class="nav-item" data-nav="profile">
        <i class="fa fa-user-o"></i>
        <span>我的</span>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const sceneBtns = document.querySelectorAll('.scene-btn');
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    const toast = document.getElementById('toast');
    
    // 场景切换
    sceneBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const scene = this.getAttribute('data-scene');
        const currentStyle = document.querySelector('.style-btn.active').getAttribute('data-style');
        
        // 更新按钮状态
        sceneBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应页面
        pageContainers.forEach(page => {
          page.classList.remove('active');
          if (page.getAttribute('data-scene') === scene && page.getAttribute('data-style') === currentStyle) {
            page.classList.add('active');
          }
        });
      });
    });
    
    // 风格切换
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        const currentScene = document.querySelector('.scene-btn.active').getAttribute('data-scene');
        
        // 更新按钮状态
        styleBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应页面
        pageContainers.forEach(page => {
          page.classList.remove('active');
          if (page.getAttribute('data-scene') === currentScene && page.getAttribute('data-style') === style) {
            page.classList.add('active');
          }
        });
      });
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 绑定按钮事件
    document.querySelectorAll('.back-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('返回上一页'));
    });
    
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.replace('fa-heart-o', 'fa-heart');
          this.classList.add('active');
          showToast('点赞成功');
        } else {
          icon.classList.replace('fa-heart', 'fa-heart-o');
          this.classList.remove('active');
          showToast('取消点赞');
        }
      });
    });
    
    document.querySelectorAll('.save-btn, .collect-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (icon.classList.contains('fa-bookmark-o')) {
          icon.classList.replace('fa-bookmark-o', 'fa-bookmark');
          this.classList.add('active');
          showToast('收藏成功');
        } else {
          icon.classList.replace('fa-bookmark', 'fa-bookmark-o');
          this.classList.remove('active');
          showToast('取消收藏');
        }
      });
    });
    
    document.querySelectorAll('.share-btn, .share-btn-top').forEach(btn => {
      btn.addEventListener('click', () => showToast('打开分享选项'));
    });
    
    document.querySelectorAll('.comment-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('查看评论列表'));
    });
    
    document.querySelectorAll('.more-btn, .info-btn, .search-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('更多选项'));
    });
    
    document.querySelectorAll('.invite-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('邀请好友'));
    });
    
    document.querySelectorAll('.register-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent === '立即报名') {
          this.textContent = '已报名';
          showToast('报名成功');
        } else {
          this.textContent = '立即报名';
          showToast('已取消报名');
        }
      });
    });
    
    document.querySelectorAll('.emotion-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('打开表情面板'));
    });
    
    document.querySelectorAll('.image-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('选择图片'));
    });
    
    document.querySelectorAll('.send-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('消息发送成功'));
    });
    
    document.querySelectorAll('.compare-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('加入对比'));
    });
    
    document.querySelectorAll('.service-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('联系客服'));
    });
    
    document.querySelectorAll('.cart-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('已加入购物车'));
    });
    
    document.querySelectorAll('.buy-btn').forEach(btn => {
      btn.addEventListener('click', () => showToast('进入结算页面'));
    });
    
    document.querySelectorAll('.nav-item').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.nav-item').forEach(item => {
          item.classList.remove('active');
        });
        this.classList.add('active');
        showToast(`切换到${this.querySelector('span').textContent}`);
      });
    });
  </script>
</body>
</html>
